<template>

	<el-card style="height: 100%;">
		<el-scrollbar wrapClass="scrollbar-wrap" :style="{height: scrollHeight}" ref="scrollbarContainer">
			<div>
				<el-form>
					<div id="a1" v-if="tikuId">
						<el-form-item prop="courseId">
							选择课程：
							<el-select v-model="courseId" placeholder="请选择" @change="getZhishiList" clearable>
								<el-option v-for="bb in courses" :key="bb.id" :value="bb.id" :label="bb.name">
								</el-option>
							</el-select>

						</el-form-item>
						<el-form-item prop="zhishiId">
							选择知识点：
							<el-select v-model="form.zhishiId" :disabled="courseId?false:true" placeholder="请选择知识点">
								<el-option v-for="vv in zhishis" :key="vv.id" :value="vv.id" :label="vv.name">
								</el-option>
							</el-select>

						</el-form-item>
					</div>
					<div id="a1" v-if="tikuId">
						<el-form-item prop="type">
							题目类型：
							<el-select v-model="form.type" placeholder="请选择" @change="tiChange">
								<el-option v-for="qq in tixing" :key="qq.id" :value="qq.id" :label="qq.name">
								</el-option>
							</el-select>


						</el-form-item>
					</div>

					<div id="a3" v-if="form.type">
						<el-form-item prop="timu">
							输入题目：<el-input style="width: 80%;" type="textarea" v-model="form.timu"></el-input>

						</el-form-item>
					</div>
				</el-form>
				<div id="a4">
					<el-button v-if="adda" class="filter-item" type="primary" icon="el-icon-plus" size="small" plain
						@click="handleAdd">
						添加
					</el-button>
					<el-table :data="xuanxiang" border style="width: 100%;">
						<el-table-column label="是否答案" width="120" align="center">
							<template slot-scope="scope">

								<el-checkbox v-model="scope.row.isRight">答案</el-checkbox>

							</template>

						</el-table-column>

						<el-table-column label="选项内容">
							<template slot-scope="scope">
								<el-input v-model="scope.row.xuanxiang" type="textarea" />
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" width="100px">
							<template slot-scope="scope">
								<el-button type="danger" icon="el-icon-delete" circle
									@click="removeItem(scope.$index)" />
							</template>
						</el-table-column>

					</el-table>
				</div>
			</div>
			<div style="padding: 20px;">
				<el-button @click="save">提交試題</el-button>
				<el-button @click="out()">退出</el-button>
			</div>
		</el-scrollbar>
	</el-card>

</template>

<script>
	import fuwenben from "../../components/fuwenben.vue"
	export default {
		components: {
			fuwenben
		},
		mounted() {
			this.scrollHeight = window.innerHeight * 0.83 + 'px';
		},

		data() {
			return {
				scrollHeight: '0px',
				courseId: '',
				courses: [],
				zhishis: [],
				adda: false,
				tikuId: '',
				form: {
					type: '',
					timu: '',
					zhishiId: ''
				},
				rules: {
					timu: [{
						required: true,
						message: '请输入题目！',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请选择题目类型！',
						trigger: 'blur'
					}],
					zhishiId: [{
						required: true,
						message: '请选择知识点类型！',
						trigger: 'blur'
					}],
				},
				xuanxiang: [],
				Shijuan: [],
				tixing: [{
						id: 1,
						name: '单选题'
					},
					{
						id: 2,
						name: '多选题'
					}, {
						id: 3,
						name: '判断题'
					},
				]
			}
		},
		methods: {
			handleAdd() {
				this.xuanxiang.push({
					isRight: '',
					xuanxiang: ''
				})
			},
			removeItem(a) {
				this.xuanxiang.splice(a, 1)
			},
			out() {
				this.$router.push('/teacher/stgl')
			},
			getCourse() {
				this.$ajax.post("/course/courselist", {}).then(res => {
					this.courses = res.data.data
				})
			},
			getZhishiList() {
				this.$ajax.post("/zhishi/findzhishi", {
					"courseId": this.courseId
				}).then(res => {
					this.zhishis = res.data.data
				})
			},
			tiChange(id) {
				if (id == 3) {
					this.xuanxiang = []
					this.adda = false
					var arr = new Array()
					arr.push({
						isRight: true,
						xuanxiang: '对'
					})
					arr.push({
						isRight: false,
						xuanxiang: '错'
					})
					this.xuanxiang = arr
				} else {
					this.xuanxiang = []
					this.adda = true
				}
			},
			save() {
				if (this.courseId == null || this.courseId == '') {
					this.$message.error('请选择课程！');
					return;
				}
				if (this.form.zhishiId == null || this.form.zhishiId == '') {
					this.$message.error('请选择知识点！');
					return;
				}
				if (this.form.type == null || this.form.type == '') {
					this.$message.error('请选择题目类型！');
					return;
				}
				if (this.form.timu == null || this.form.timu == '') {
					this.$message.error('请输入题目！');
					return;
				}

				for (var i = 0; i < this.xuanxiang.length; i++) {
					if (this.xuanxiang[i].xuanxiang == null || this.xuanxiang[i] == "") {
						this.$message.error('请填写选项内容！');
						return;
					}
				}
				if (this.form.type == 2) {
					var a = 0;
					for (var i = 0; i < this.xuanxiang.length; i++) {
						if (this.xuanxiang[i].isRight == true) {
							a++;
						}
					}
					if (a < 2) {
						this.$message({
							message: '答案至少为两个！',
							type: 'warning'
						});
						return;
					}
				} else {
					var a = 0;
					for (var i = 0; i < this.xuanxiang.length; i++) {
						if (this.xuanxiang[i].isRight == true) {
							a++;
						}
					}
					if (a != 1) {
						this.$message({
							message: '答案只能是一个！',
							type: 'warning'
						});
						return;
					}
				}
				this.$ajax.post("/tiku/saveQuestion", {
					"type": this.form.type,
					"timu": this.form.timu,
					"tikuId": this.tikuId,
					"zhishiId": this.form.zhishiId
				}).then(res => {
					if (res.data) {
						console.log(res.data);
						this.$ajax.post("/tiku/saveXuanXiang", {
							"list": JSON.stringify(this.xuanxiang),
							"quesId": res.data.data.id
						}).then(res => {
							if (res.data) {
								this.form = []
								this.xuanxiang = []
							}
						})
					}
				})
				console.log(this.form);
        this.out()
			}
		},
		created() {
			this.tikuId = this.$route.query.tikuId
			this.getCourse()

		}
	}
</script>

<style>
	#a1 {
		margin: 20px;
	}

	#a2 {
		margin: 20px;
	}

	#a3 {
		margin: 20px;
	}


</style>
